<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>各种上传样式</title>
    <link rel="stylesheet" href="/web/res/css/xadmin.css">
    <script src="/web/res/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/web/res/js/xadmin.js"></script>
</head>

<body>
    <form class="layui-form layui-form-pane" id="formsubmit" style="width: 530px;margin:20px auto">
        <input type="hidden" name="id" value="${(appVideoOne.id?c)!''}" />


        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend class="form-title">上传图片</legend>
        </fieldset>
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-upload">
                <div class="upload-imgBox">
                    <img class="upload-select-img" id="demo1">
                </div>
                <div class="upload-img test1">+</div>
                <button type="button" class="layui-btn test1" style="margin-left: 20px;">选择图片</button>
            </div>
        </div>


        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend class="form-title">上传视频</legend>
        </fieldset>
        <div class="layui-form-item" id="videoUp" style="position: relative;">
            <label class="layui-form-label" style="height: 137px; line-height: 117px">视频</label>
            <input name="bannervideo" id="videourl" value="" autocomplete="off" class="layui-input" type="hidden">
            <div class="layui-upload-drag uploadBox" id="video" type="video">
                <i class="layui-icon" id="icon">&#xe654;</i>
            </div>
            <div class="uploadBtnBox" style="justify-content: space-around;">
                <button type="button" id="resetVedio" class="layui-btn">
                    <i class="layui-icon">&#xe669;</i>
                </button>
                <button type="button" id="videoDetail" class="layui-btn layui-btn-normal" onclick="openVideo()">
                    <i class="layui-icon">&#xe6ed;</i>预览
                </button>
            </div>
            <video id="showvideo" controls class="upload"></video>
        </div>


        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend class="form-title">上传音频</legend>
        </fieldset>
        <div class="layui-form-item" id="" style="position: relative;">
            <label class="layui-form-label" style="height: 80px; line-height: 80px">音频</label>
            <input name="banneraudio" id="audiourl" value="" autocomplete="off" class="layui-input" type="hidden">
            <div class="layui-upload-drag uploadBox1" id="audio" type="video">
                <i class="layui-icon" id="icon">&#xe654;</i>
            </div>
            <div class="uploadBtnBox" style="height:80px">
                <button type="button" id="resetAudio" class="layui-btn layui-btn-normal">
                    <i class="layui-icon">&#xe669;</i>
                </button>
            </div>
            <audio id="showaudio" controls class="uploadAudio"></audio>
        </div>


        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend class="form-title">上传文件</legend>
        </fieldset>
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-inline">
                <input type="text" name="title" id="excelname" required lay-verify="required" placeholder="请上传Excel文件"
                    autocomplete="off" class="layui-input">
            </div>
            <button type="button" class="layui-btn" id="test5"><i class="layui-icon"></i>上传文件</button>
        </div>



        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend class="form-title">多图片上传</legend>
        </fieldset>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend class="form-title">多文件上传</legend>
        </fieldset>
        <div class="layui-form-item" pane style="position: relative;">
            <label class="layui-form-label upload-lable">上传文件</label>
            <div class="layui-input-block" id="content">
                <div class="layui-upload-drag" id="uploadBox">
                    <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                </div>
            </div>
        </div>
        <div style="text-align: right;">
            <button type="button" id="uploadDel" class="layui-btn">
                <i class="layui-icon">&#xe669;</i>
            </button>
        </div>

    </form>


    <script>
        // 单视频上传预览按钮
        function openVideo() {
            var classVideo = document.getElementById("videourl").value;
            lookVideo(classVideo)
            // var index = layer.open({
            //     type: 2,
            //     content: './yulan.html?classVideo=' + classVideo,
            //     area: ['600px', '450px'],
            //     offset: 't',
            //     maxmin: true,
            //     end: function () {
            //     }
            // });
        }
        layui.use(['form', 'upload'], function () {
            let $ = layui.$;
            var form = layui.form;
            var upload = layui.upload;



            // 单图片上传

            // if  没初始值
            $('.upload-imgBox').hide();
            // else
            // $('.upload-img').hide();

            var uploadInst = upload.render({
                elem: '.test1'
                , url: 'https://httpbin.org/post'
                , before: function (obj) {
                    $('.upload-img').hide();
                    $('.upload-imgBox').show();
                    layer.load();
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result);
                    });
                }
                , done: function (res) {
                    layer.closeAll('loading');
                    layer.msg('上传成功');
                }
            });

            // 单视频上传

            // if  没初始值
            $("#showvideo").hide()
            // else 
            // $("#video").hide()

            // 右侧按钮
            $("#resetVedio").on('click', function () {
                $("#showvideo").hide()
                $("#video").show()
                $("#showvideo").attr("src", '');
                $("#videourl").attr("value", '');
            })
            var uploadInst = upload.render({
                elem: '#video'
                , url: 'https://httpbin.org/post'
                , accept: 'video'
                , acceptMime: 'video/*'
                , choose: function (obj) {
                    obj.preview(function (index, file, result) {
                        $("#showvideo").show()
                        $("#video").hide()
                        $("#videourl").val(result);
                        $("#showvideo").attr("src", result);
                    });
                }
                , before: function (obj) {
                    layer.load();
                }
                , done: function (res) {
                    layer.closeAll('loading');
                    layer.msg('上传成功');
                }
            });


            // 单音频上传

            // if  没初始值
            $("#showaudio").hide()
            // else 
            // $("#audio").hide()

            // 右侧按钮
            $("#resetAudio").on('click', function () {
                $("#showaudio").hide()
                $("#audio").show()
                $("#showaudio").attr("src", '');
                $("#audiourl").attr("value", '');
            })
            var uploadInst = upload.render({
                elem: '#audio'
                , url: 'https://httpbin.org/post'
                , accept: 'audio'
                , acceptMime: 'audio/*'
                , choose: function (obj) {
                    obj.preview(function (index, file, result) {
                        $("#showaudio").show()
                        $("#audio").hide()
                        $("#audiourl").val(result);
                        $("#showaudio").attr("src", result);
                    });
                }
                , before: function (obj) {
                    layer.load();
                }
                , done: function (res) {
                    layer.closeAll('loading');
                    layer.msg('上传成功');
                }
            });




            //  单文件上传
            upload.render({
                elem: '#test5'
                , url: 'https://httpbin.org/post'
                , accept: 'file'
                //, acceptMime: '.xlsx,.xls,.csv'//筛选指定后缀文件
                , choose: function (obj) {
                    obj.preview(function (index, file, result) {
                        $('#excelname').val(file.name)
                    });
                }
                , before: function (obj) {
                    layer.load();
                }
                , done: function (res) {
                    layer.closeAll('loading');
                    layer.msg('上传成功');
                }
            });



            // 多文件上传

            // if 有初始值
            // var filesImageArr = [
            //     { url: '../../../images/files/a.jpg', fiel: 'xxx' },
            //     { url: '../../../images/files/b.jpg', fiel: 'xxx' }
            // ]
            // var filesVideoArr = [
            //     { url: '../../../images/files/2.mp4', fiel: 'xxx' },
            //     { url: '../../../images/files/test.mp4', fiel: 'xxx' }
            // ]
            // var filesAudioArr = [
            //     { url: '../../../images/files/1.mp3', fiel: 'xxx' },
            //     { url: '../../../images/files/2.mp3', fiel: 'xxx' }
            // ]
            // 图片回显
            // filesImageArr.forEach((e,i)=>{
            //     uploadImage(i,e.url)
            //     $("#"+"detail"+i).on('click',function(){
            //         lookImage(e.url) // 查看
            //         console.log(this)
            //     })
            //     $("#"+"del"+i).on('click',function(){
            //         delete filesImageArr[i]
            //         // filesImageArr[i] = undefined
            //         delImage(i,filesImageArr) // 删除
            // $("#"+"imgItemBox"+index).remove()
            //     })
            // })

            // 视频回显
            // filesVideoArr.forEach((e,i)=>{
            //     uploadVideo(i,e.url)
            //     $("#"+"videoDetail"+i).on('click',function(){
            //         lookVideo(e.url) // 查看
            //     })
            //     $("#"+"videoDel"+i).on('click',function(){
            //         delete filesVideoArr[i]
            //         // filesVideoArr[i] = undefined
            //         delVideo(i,filesVideoArr) // 删除
            //     })
            // })

            // 音频回显
            // filesAudioArr.forEach((e,i)=>{
            //     uploadAudio(i,e.url)
            //     $("#"+"audioDel"+i).on('click',function(){
            //         delete filesAudioArr[i]
            //         // filesAudioArr[i] = undefined
            //         delAudio(i,filesAudioArr) // 删除
            //     })
            // })

            // else
            var filesImageArr = []
            var filesVideoArr = []
            var filesAudioArr = []

            // 上传
            upload.render({
                elem: '#uploadBox',
                url: 'https://httpbin.org/post',
                multiple: true,
                accept: 'file',
                auto: false,
                choose: function (obj) {
                    var loading = layer.msg('请稍后...', { icon: 16, shade: 0.3, time: 0 });
                    var files = obj.pushFile();

                    // 右侧删除
                    $('#uploadDel').on('click', function () {
                        files = {}
                        initUpload()
                    })

                    obj.preview(function (index, file, result) {
                        layer.close(loading)
                        const i = index
                        // const src = file
                        const src = URL.createObjectURL(file)
                        // const date = new Date()
                        // const weiyiId = date.getFullYear() + '-'+(date.getMonth()+1)+'-'+date.getDate() + index

                        // var fr = new FileReader();
                        // fr.readAsDataURL(file);
                        // fr.onloadend = (e) => {
                        //     this.imageUrl = e.target.result;
                        // }

                        console.log(src)
                        // 上传图片
                        if (file.type.split('/')[0] == 'image') {
                            uploadImage(i, src) // 渲染
                            const newFile = { url: i, fiel: file }
                            filesImageArr.push(newFile)
                            $("#" + "del" + index).on('click', function () {
                                delete files[index]
                                filesImageArr.forEach((e, index) => {
                                    if (e.url == i) {
                                        delete filesImageArr[index]
                                    }
                                })
                                delImage(i, files) // 删除
                            })
                            $("#" + "detail" + index).on('click', function () {
                                lookImage(src) // 查看大图
                                console.log(this)
                            })
                        }
                        // 上传视频
                        if (file.type.split('/')[0] == 'video') {
                            uploadVideo(i, src)
                            const newFile = { url: i, fiel: file }
                            filesVideoArr.push(newFile)
                            $("#" + "videoDel" + index).on('click', function () {
                                delete files[index]
                                filesVideoArr.forEach((e, index) => {
                                    if (e.url == i) {
                                        delete filesVideoArr[index]
                                    }
                                })
                                delVideo(i, files)
                            })
                            $("#" + "videoDetail" + index).on('click', function () {
                                lookVideo(src)
                            })
                        }
                        // 上传音频
                        if (file.type.split('/')[0] == 'audio') {
                            $('#uploadBox').hide()
                            uploadAudio(i, src)
                            const newFile = { url: i, fiel: file }
                            filesAudioArr.push(newFile)
                            $("#" + "audioDel" + index).on('click', function () {
                                delete files[index]
                                filesAudioArr.forEach((e, index) => {
                                    if (e.url == i) {
                                        delete filesAudioArr[index]
                                    }
                                })
                                delAudio(i, files)
                            })
                        }
                    });
                },
                allDone: function (obj) { //当文件全部被提交后，才触发
                    console.log(obj.total); //得到总文件数
                    console.log(obj.successful); //请求成功的文件数
                    console.log(obj.aborted); //请求失败的文件数
                    let str = '总文件数：' + obj.total + ',上传成功：' + obj.successful + ",上传失败：" + obj.aborted
                    layer.msg(str, { icon: 1 });
                }
                , before: function (obj) {
                    layer.load();
                }
                , done: function (res) {
                    layer.closeAll('loading');
                    layer.msg('上传成功');
                }
            });

        });
    </script>
</body>

</html>